<template>
  <div class="like-item">
    <div class="like-item-warp">
      <div class="actor-info">
        <div class="null"></div>
        <span class="name">{{ likeItem.userName }}</span>
        <div class="head">
          <img :src="likeItem.avatar" alt="" />
        </div>
      </div>
      <div class="main">
        <img :src="likeItem.bgImg" alt="" />
        <div class="details">
          <div class="inlike">
            <div class="red"></div>
            <span> 直播中</span>
            <span>
              <img src="../assets/image/home/huo.png" alt="" class="img-huo" />
              {{ likeItem.visitorCount | playvolume }}</span>
          </div>
          <div class="slogan">
            <h3>{{ likeItem.intro }}</h3>
          </div>

          <ul class="goods_list">
            <li class="goods_item" v-for="(goods,i) in likeItem.shopCarts.goods" :key="i">
              <img class="goods_img" :src="goods.cover" alt="" />
              <span class="goods_price">{{ goods.price }}</span>
            </li>

          </ul>
          <div class="goods_comment">
            <div class="goods_comment_item" v-for="(item,i) in likeItem.comments" :key="i">
              <img :src="item.avatar" alt="" v-if="item.content">
              <p>
                {{ item.content}}
              </p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    likeItem:{
      type:Object,
      default:{}
    }
  },
  filters:{
    //j截取单元
    playvolume(arg){
        if(arg.toString().length>=4){
          const volume=arg/10000
          const realVal=parseFloat(volume).toFixed(1)
          return realVal+'万'
        }
    }
  }
};
</script>

<style lang="scss" scoped>



.like-item-warp {
  padding: 0 10px;
  .actor-info {
    height: 40px;
    line-height: 40px;
    display: flex;
    position: relative;
    .null {
      flex: 0 0 75px;
    }
    .name {
      flex: 1;
      color: #787878;
      font-size: 15px;
      margin-top: 8px;
    }
  }
  .head {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
    img {
      display: block;
      width: 100%;
      border-radius: 50%;
    }
  }
  .main {
    position: relative;
    img {
      width: 100%;
      border-radius: 4px;
      height: 200px;
      object-fit: cover;
    }
    .details {
      height: 65%;
      position: absolute;
      color: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      margin-top: auto;
      padding: 0.1rem 0.24rem 0.24rem;
      background-image: -webkit-linear-gradient(
        top,
        transparent,
        rgba(0, 0, 0, 0.4)
      );
      background-image: linear-gradient(
        180deg,
        transparent,
        rgba(0, 0, 0, 0.4)
      );
      .inlike {
        max-width: -webkit-max-content;
        padding: 4px;
        margin: 0 10px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        span {
          margin: 0 3px;
          &:last-child {
            padding-left: 3px;
            border-left: 1px solid #eee;
          }
        }
        .img-huo {
          width: 10px;
          height: 10px;
        }
        .red {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #f5342f;
           opacity:1;
          animation: show 1.5s linear infinite;
        }
      }
      .slogan {
        margin: 10px 10px;
      }
      .goods_list {
        display: flex;
        margin-left: 10px;
        .goods_item {
          width: 20%;
          margin-right: 5px;
          position: relative;
          .goods_img {
            width: 60px;
            height: 60px;
            margin-top: 5px;
          }
          .goods_price {
            position: absolute;
            bottom: 5px;
            left: 2px;
            font-size: 14px;
          }
        }
      }
      .goods_comment {
        width: 110px;
        height: 60px;
        position: absolute;
        margin-left: 10px;
        right: 10px;
        bottom: 30px;
        .goods_comment_item{
          display: flex;
          align-items: center;
          margin-top: 10px;
        }
        img{
          width: 14px;
          height: 14px;
          border-radius: 50%;
        }
        p {
          font-size: 12px;
          margin-left: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
@keyframes show{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
</style>